<template>
    <div class="login">
        <div class="container">
            <div class="title">Welcome</div>
            <van-form @submit="onSubmit">
                <van-field v-model="username" name="username" label="用户名" placeholder="请输入用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <div style="margin: 16px;">
                    <van-button round block native-type="submit">登录</van-button>
                </div>
            </van-form>
        </div>

    </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { login } from '../api';
import { showSuccessToast, showFailToast, showLoadingToast } from 'vant';

const username = ref('');
const password = ref('');

const onSubmit = () => {
    if (!username.value.trim()) {
        showFailToast('账号不能为空');
        return;
    }

    if (!password.value.trim()) {
        return showFailToast('密码不能为空');
    }

    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
    });

    login(username.value, password.value).then(res => {
        if (res.code === 1) {
            showSuccessToast('登陆成功');
        } else {
            showFailToast('登陆失败');
        }
    })
};
</script>
<style scoped>
.login {
    width: 100%;
    height: 100vh;
    padding: 5rem 2rem;
    background-image: url('../assets/loginBg.png');
    background-size: cover;
}

.title {
    font-size: 2rem;
    padding-bottom: 2rem;
    color: #fff;
    text-align: center;
    /* padding: 2rem; */
}
</style>